<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <style type="text/css">
    * {
      margin: 0 auto;
    }
    body {
      margin: 15vh 0;
    }
    button {
      /* font-family: "仿宋"; */
      display: block;
      height: 18vw;
      width: 70vw;
      border-radius: 50px;
      outline: none;
      font-size: 3rem;
      color: #fff;
    }
  </style>
  <body>
    <div id="app">
      <template></template>
      <ul>
        <li class="li">姓&emsp;名：<input type="text" /></li>
        <li class="li">手&ensp;机：<input type="text" /></li>
        <li class="li">电&ensp;子 邮&nbsp;箱：<input type="text" /></li>
      </ul>
      <!-- &nbsp; 不会累加的（只算1个），且该空格占据宽度受【字体】影响明显而强烈 -->
      <button type="button">提&nbsp;&nbsp;&nbsp;&nbsp;交</button><br />
      <!-- &ensp; 占据的宽度正好是1/2个中文宽度，且基本上不受字体影响 -->
      <button type="button">提&ensp;&ensp;交</button><br />
      <!-- &emsp; 占据的宽度正好是1个中文宽度，且基本上不受字体影响 -->
      <button type="button">提&emsp;交</button><br />
      <!-- &thinsp; 占据的宽度比较小，它是em之六分之一宽 -->
      <button type="button">
        提&thinsp;&thinsp;&thinsp;&thinsp;&thinsp;&thinsp;交</button
      ><br />

      <!-- &zwnj; （零宽不连字）是一个不打印字符，放在电子文本的两个字符之间，抑制本来会发生的连字，
         而是以这两个字符原本的字形来绘制 -->
      <!-- &zwj; （零宽连字）是一个不打印字符，放在某些需要复杂排版语言（如阿拉伯语、印地语）的两个字符之间，
         使得这两个本不会发生连字的字符产生了连字效果 -->
    </div>
  </body>
  <script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>
  <script>
    var app = new Vue({
      el: "#app",
      data: {},
      mounted() {
        // forEach
        var arr1 = [
          { name: "鸣人", age: 16 },
          { name: "佐助", age: 17 },
        ];
        // 当是引用类型，则可以改变数组
        console.log(arr1);

        var arr2 = [1, 2, 3];
        arr2.forEach((item) => {
          item = item * 2;
        });
        // 当数组中元素是值类型，forEach绝对不会改变数组；
        console.log(arr2);

        // map
        let arr = [1, 2, 3];
        arr = arr.map((item) => {
          return item * 2;
        });
        console.log(arr);

        let tempArr = arr1.map((item) => {
          // 必须返回新对象，不对原有数组每一项做操作（引用类型）
          return {
            name: item.name + ",",
            age: item.age + 1,
          };
        });
        console.log(arr1, tempArr);

        // some检查数组中是否有某些条件符合
        var result = [
          { name: "鸣人", age: 16 },
          { name: "佐助", age: 17 },
        ].some((item) => {
          return item.age > 16;
        });
        console.log(result);

        // 斐波那契数列
        let fibonacci = [1, 1];
        // 初始的数据项
        // fibonacci[1] = 1
        // fibonacci[2] = 1
        for (let i = 2; i < 10; i++) {
          fibonacci[i] = fibonacci[i - 1] + fibonacci[i - 2]; // {4}
        }
        let numbers = [0, 1, 2, 3, 4];
        // 从头插入多个
        // numbers.unshift(-4, -3);
        // console.log('object', numbers);
        // 从索引开始的第三个元素、索引知识的理解
        // numbers.splice(4, 1);
        numbers.splice(5, 0, 5);
        console.log("object", numbers);
        // 二维数组
        let averageTemp = [];
        averageTemp[0] = [72, 75, 79, 79, 81, 81];
        averageTemp[1] = [81, 79, 75, 75, 73, 73];
        // @ts-check
        // interface Person {
        //   name: string;
        //   age: number;
        //  }
      },
      methods: {},
    });
  </script>
</html>
